<!--
 * @Author: byron
 * @Date: 2021-09-26 08:09:21
 * @LastEditTime: 2021-10-07 09:05:17
-->
<template>
    <div v-if="list.length">
        <Title>推荐歌单</Title>
        <div class="list-warp">
            <PlaylistCard
                v-for="(item, index) in list"
                :key="index"
                :img="item.picUrl"
                :name="item.name"
                :desc="item.copywriter"
                :id="item.id"
            />
        </div>
    </div>
</template>

<script>
import { getPersonalized } from '@/api'

export default {
    components: {},
    props: {},
    data() {
        return {
            list: [],
        }
    },
    watch: {},
    computed: {},
    methods: {},
    async created() {
        const { result } = await getPersonalized({
            limit: 10,
        })
        this.list = result
    },
    mounted() {},
}
</script>
<style lang="scss" scoped>
.list-warp {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px;
}
</style>
